<template>
  <view>
    <cm-nav back>
      <template v-slot:center>排盘记录</template>
    </cm-nav>
    
    <!-- 未登录的状态下显示的页面 -->
    <view class="bagua-records-logout" v-if="isLogout">
      <view class="bagua-records-logout-wrapper">
        <view>
          <cm-icon size="48" cm-class="app-theme-color" type="iconfont icon-prompt"></cm-icon>
        </view>
        <view class="cm-text-14 cm-margin-top-10">登录后才可以查看排盘记录</view>
        <view class="cm-margin-top-10 cm-flex cm-flex-j-center">
          <cm-button cm-class="cm-margin-5" type="primary" outlined @click="loginHandler">前往登录</cm-button>
          <cm-button cm-class="cm-margin-5" type="primary" outlined @click="reloadHandler">重新加载</cm-button>
        </view>
      </view>
    </view>
    
    <!-- 正式内容 -->
    <view v-if="!isLogout">
      <!-- 导航条 -->
      <cm-sticky forever-stick :top="CustomBar">
        <view class="cm-flex cm-flex-a-center cm-padding-10 app-card-bg-color_bg app-border-color_ex-bottom">
          <cm-icon type="iconfont icon-search"></cm-icon>
          <view class="cm-flex-g-1 cm-margin-right-10">
            <cm-input placeholder="请输入搜索关键字" border @input="searchInputHandler"></cm-input>
          </view>
          <cm-icon type="iconfont icon-filter" @click="queryShowHandler"></cm-icon>
        </view>     
      </cm-sticky>
      
      
      <view class="app-border-color_ex-bottom app-card-bg-color_bg cm-padding-10"
        v-for="(item, index) in dataSet" :key="index"
        @click="selectBaguaHandler(item)">
        <view class="cm-flex cm-flex-a-center cm-flex-j-between cm-margin-bottom-5">
          <view class="cm-bold app-theme-color">{{ item.title }}</view>
          <view class="app-text-color-grey cm-text-14">{{ getTypeText(item.type) }}</view>
        </view>
        
        <view v-if="item.type === 'timeDunjia'" class="cm-flex cm-flex-wrap cm-text-h-15 cm-text-14 app-alert-color">
          <view class="cm-margin-right-20">定局时间：{{ getDateStr(item.date) }}</view>
          <view class="cm-margin-right-20">时局类型：{{ getTimeDunjiaType(item.timeDunjiaType) }}</view>
        </view>
        
        <view v-if="item.type === 'posDunjia'" class="cm-flex cm-flex-wrap cm-text-h-15 cm-text-14 app-alert-color">
          <view class="cm-margin-right-20">定局时间：{{ getDateStr(item.date) }}</view>
          <view class="cm-margin-right-20">山向类型：{{ getPosDunjiaType(item.posDunjiaType) }}</view>
          <view class="cm-margin-right-20">山向角度：{{ item.angle }}</view>
        </view>
        
        <view v-if="item.type === 'bazi'" class="cm-flex cm-flex-wrap cm-text-h-15 cm-text-14 app-alert-color">
          <view class="cm-margin-right-20">生日：{{ getDateStr(item.date) }}</view>
          <view class="cm-margin-right-20">姓名：{{ item.name }}</view>
          <view class="cm-margin-right-20">性别：{{ item.sex }}</view>
        </view>
        
        <view class="cm-flex cm-flex-a-center cm-flex-j-between">
          <view>
            <view class="cm-text-h-15 cm-text-14">创建：{{ getStampStr(item.saveBaguaInfo.createdTime) }}</view>
            <view class="cm-text-h-15 cm-text-14">最近更新：{{ getStampStr(item.saveBaguaInfo.updatedTime) }}</view>            
          </view>
          <cm-button type="error" @click="deleteHandler(item, index)">删除</cm-button>
        </view>
      </view>
      <!-- 加载更多 -->
      <view class="cm-flex cm-flex-a-center cm-flex-j-center cm-padding-10 cm-text-12" v-if="isLoadingMore">
        <cm-icon type="cm-icon-load load-cuIcon"></cm-icon>
        <view class="cm-margin-left-5">更多内容加载中</view>
      </view>
      <view v-else class="cm-flex cm-flex-j-center cm-padding-10">
        <cm-button type="primary" @click="loadMoreHandler">点击获取更多</cm-button>
      </view>
    </view>
    
    <!-- 过滤选项 -->
    <cm-popup ref="queryPopup" direction="right" width="60%">
      <view class="cm-padding-10">
        <view class="cm-bold app-theme-color cm-margin-top-10">排盘类型</view>
        <cm-radio cm-class="cm-text-14" :value="query.type" :radio-data="radioData.type" group-type="block"
          @change="queryChangeHandler($event, 'type')"></cm-radio>
        <view class="cm-bold app-theme-color cm-margin-top-10">排序方式</view>
        <cm-radio cm-class="cm-text-14" :value="query.sortType" :radio-data="radioData.sortType" group-type="block"
          @change="queryChangeHandler($event, 'sortType')"></cm-radio>
        <view class="cm-bold app-theme-color cm-margin-top-10">升/降序</view>
        <cm-radio cm-class="cm-text-14" :value="query.sort" :radio-data="radioData.sort" group-type="block"
          @change="queryChangeHandler($event, 'sort')"></cm-radio>
      </view>
    </cm-popup>
    <!-- 载入 -->
    <cm-loading ref="recordsLoading" @loading="init"></cm-loading>
  </view>
</template>

<script src="./baguaRecords.js"></script>

<style lang="stylus">
@import './baguaRecords.styl'
</style>
